<template>
  <editor :id="id" :key="tinymceKey" v-model="content" :init="setting" />
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons.min.js'

import 'tinymce/plugins/paste'
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/link'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/fullscreen'
import setting from './setting'

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: 'TinymceEditor'
    }
  },
  data () {
    return {
      tinymceKey: 0,
      content: this.value || '',
      setting
    }
  },
  watch: {
    value (newValue) {
      this.content = newValue
    },
    content (newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted () {
    this.$nextTick(() => {
      tinymce.init({}).then(resolve => {
        ++this.tinymceKey
        console.log('加载完成')
      })
    })
  },
  beforeDestroy () {
    tinymce.remove()
  }
}
</script>
